.{$autoComplete-prefix}
  position relative
  border 1px solid $gray4-color
  border-radius $border-radius-size
  box-sizing border-box
  outline none
  font-size $font-size-mini
  .{$autoComplete-prefix}-show
    position relative
    input
      width 100%
      padding-right 28px
      border none
      &:hover
        border none
        box-shadow none
    .d-icon-close
      position absolute
      top 5px
      right 8px
      cursor pointer
      font-size 15px
      &:hover
        color $primary-color
  &-trigger
    border 1px solid $primary-color
    box-shadow 0 0 0 2px rgba($primary-color, .2)

.{$autoComplete-prefix}-group
  margin 5px 0
  z-index 10
  &.{$autoComplete-prefix}-group-trigger
    .{$autoComplete-prefix}-group-inner
      transform scale(1)
      opacity 1
  &[x-placement^='top']
    .{$autoComplete-prefix}-group-inner
      transform-origin bottom left
  &[x-placement^='bottom']
    .{$autoComplete-prefix}-group-inner
      transform-origin top left
  .{$autoComplete-prefix}-group-inner
    transition .25s cubic-bezier(.24, .22, .015, 1.56)
    transition-property transform, opacity
    transform scale(.8)
    opacity 0
  .{$autoComplete-prefix}-list
    display block
    box-sizing border-box
    border-radius $border-radius-size
    background white
    box-shadow 0 5px 10px rgba(0, 0, 0, .1)
    padding 8px 0
    max-height 300px
    overflow-y auto
    .{$autoComplete-prefix}-item
      padding 8px 10px
      text-ellipsis()
      &.{$autoComplete-prefix}-item-autoCompleteed
        background-color rgba($primary-color, .15)
      &:hover
        background-color $gray3-color